<template>
  <navbarDefaultCom  title="运势关键词"  @changeDate="changeDate" @changeDay="changeDay" />
  <view class="keyword" >
    <view class="keyword-item" v-for="(item, index) in keywordList" :key="index" >
      <image class="bg" :src="item.bgImg" />
      <view class="header" >
        <image class="title-bg" style="scale: 0.8;" :src="item.titleImg" />
        <view class="more" @click="pushDiaryKeywordPage(item)" > 看看日记 > </view>
      </view>
   
      <view class="keyword-area" >
        <view  class="keyword-area-item"  v-for="(key, index) in item.keys" :key="key" >
          {{key}}
        </view>
      </view>
    </view>

      <EmptyCom v-if="keywordList.length === 0"  desc="还没有人发布日记哦" />
  </view>
</template>
<script lang='ts'  setup >
import navbarDefaultCom from '@/components/navbar-default-com/navbar-default-com.vue';
import { KeywordController } from '@/controller';
import { useSettingStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
import { ref } from 'vue';
import EmptyCom from '@/components/default-empty-com/index.vue';
import { useRouterStore } from '@/store'

 const useSetting = useSettingStore()

  const queryParams = ref({
    time: '',
    isDay: true
  })

  const keywordList = ref<API.KEYWORD[]>([])

  const changeDate = ({date}: {date: string}) => {
    queryParams.value.time = date
    getKeyword()
  }

  const changeDay = ({isDay}: {isDay: boolean}) => {
    queryParams.value.isDay = isDay
    getKeyword()
  }

  const getKeyword = () => KeywordController.getKeyword({
    time: queryParams.value.time,
    isDay: useSetting.isDay
  }).then(res => {
    keywordList.value = res.filter(item => item.keys.length > 0)
    console.log('keywordList', keywordList.value.length);
    
  })

  const pushDiaryKeywordPage = (item: API.KEYWORD) => {
    uni.navigateTo({
      url: '/pages/keyword/diary?hourGan=' + item.hourGan + '&day=' + queryParams.value.time
    })
  }
  
  onLoad(() => {
    queryParams.value.time = dayjs().format('YYYY-MM-DD')    
    getKeyword()


  })

  onShow(() => {
    useRouterStore().setRoutes(['/pages/keyword/index'])
  })

</script>
<style lang='scss' scoped >
@import '@/styles/index.scss';

 .keyword {
  width: 100vw;
  height: 100vh;
  padding-top: 280rpx;
  padding-bottom: 100rpx;
  background-color: $page-color;
  .keyword-item {
    width: 700rpx;
    height: 247rpx;
    margin: 0 auto;
    margin-bottom: 24rpx;
    position: relative;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);
    }

    .bg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .header  {
      width: 100%;
      position: absolute;
      top: 18rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24rpx;
      box-sizing: border-box;
    }
    .title-bg {
      width: 144rpx;
      height: 113rpx;
      display: block;
      scale: 1;
    }
    .more {
      color: #fff;
      width: 168rpx;
      height: 48rpx;
      background-color: #ffffffa0;
      border-radius: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #ffffffc0;
      }
    }
    .keyword-area {
      width: 652rpx;
      height: 80rpx;
      display: flex;
      align-items: start;
      flex-wrap: wrap;
      justify-content: flex-start;
      position: absolute;
      left: 48rpx;
      bottom: 32rpx;
      overflow: hidden;
      .keyword-area-item {
        color: #fff;
        display: flex;
        margin-right: 24rpx;
      }
    }
  }
 }
</style>